require(['../config'], () => {
    require(['template', 'header', 'footer', 'zoom', 'fly'], (template, header) => {
        class detail {
            constructor() {
                this.render().then(() => {
                    this.zoom()
                    this.add()
                })

            }
            render() {
                const id = location.search.slice(4)
                console.log(id)
                return new Promise((resolve, reject) => {
                    $.get('http://xiongmaoyouxuan.com/api/detail', { id }, resp => {
                        console.log(resp)
                        if (resp.code === 200) {
                            const {
                                image,
                                photo,
                                price,
                                originPrice,
                                saleNum,
                                title,
                                id
                            } = resp.data.detail
                                // console.log(url)
                            this.detail = {
                                image,
                                photo,
                                price,
                                originPrice,
                                saleNum,
                                title,
                                id
                            }
                            $('#shop-detail').html(
                                template('detailTemplate', {
                                    ...this.detail,
                                    ...this.detail.photo
                                })
                            )
                        }
                        resolve()
                    })
                })
            }
            zoom() {
                $('#shop-img').elevateZoom({
                    gallery: 'smallZoom',
                    cursor: 'crosshair',
                    easing: true,
                    zoomWindowOffetx: 10,
                    zoomWindowOffety: 10,
                    borderSize: 1,
                    scrollZoom: true,
                    loadingIcon: true,
                    containLensZoom: true,

                })
            }
            fly1(e) {
                $('<div><span class="iconfont icon-gouwucheman"></span></div>').addClass('fly').fly({
                    start: {
                        left: e.clientX,
                        top: e.clientY
                    },
                    end: {
                        left: $('#cart').offset().left, //结束位置（必填）
                        top: $('#cart').offset().top, //结束位置（必填）
                    },
                    onEnd: function() {
                        this.destroy()
                        header.countNum()
                    }
                })


            }
            add() {
                // 加入购物车
                $('#addCart').on('click', (e) => {
                    console.log(111)
                        // console.log($(this).fly);

                    this.fly1(e)
                    let cart = localStorage.getItem('cart')
                        // 判断是否存在数据
                    if (cart) {
                        // 购物车已经有数据
                        cart = JSON.parse(cart)
                            // 判断购物车里是否已经存在当前数据
                        const isExist = cart.some(shop => {
                            return shop.id === this.detail.id
                        })
                        if (isExist) {
                            // 当前数据在购物车里已存在，只需要把数量加加即可
                            cart = cart.map(shop => {
                                if (shop.id === this.detail.id) shop.count++
                                    // 无论是否满足if条件都需要return
                                    return shop
                            })
                        } else {
                            // 数据不存在，就push，默认数量为1,check也就是选中状态为true
                            cart.push({...this.detail, count: 1, check: true })
                        }
                        // 无论数据是否存在，都要把修改好的cart重新存入localStorage
                        localStorage.setItem('cart', JSON.stringify(cart))
                    } else {
                        // 购物车为空
                        // 存一个数组，这个数组里只有this.detail这一条数据
                        // 在存详情数据的时候再加一个默认数量count为1
                        // 默认check也就是选中状态为true
                        localStorage.setItem('cart', JSON.stringify([{
                            ...this.detail,
                            count: 1,
                            check: true
                        }]))
                    }
                })
            }
        }
        new detail()
    })
})